import React, { Component } from 'react';
import {
  Row,
  Col,
  Card,
  List,
  Avatar,
  Button,
  Form,
  Popconfirm,
  Divider,
  Modal,
  Slider,
  InputNumber,
  Collapse,
  Icon,
  message,
  Select,
  Timeline,
  Input,
} from 'antd';
import Link from 'umi/link';
import { formatMessage } from 'umi/locale';
import { connect } from 'dva';
import CamXAxisForm from './hdForms/CamXAxisForm';
import CamYAxisForm from './hdForms/CamYAxisForm';
import CamZAxisForm from './hdForms/CamZAxisForm';
import CamRAxisForm from './hdForms/CamRAxisForm';

import CbjXAxisForm from './hdForms/CbjXAxisForm';
import CbjYAxisForm from './hdForms/CbjYAxisForm';
import CbjZAxisForm from './hdForms/CbjZAxisForm';
import CbjRAxisForm from './hdForms/CbjRAxisForm';
import CbjCutForm from './hdForms/CbjCutForm';
import CutterXAxisForm from './hdForms/CutterXAxisForm';
import CutterYAxisForm from './hdForms/CutterYAxisForm';
import CutterZAxisForm from './hdForms/CutterZAxisForm';
import CutterRAxisForm from './hdForms/CutterRAxisForm';
import CutterWAxisForm from './hdForms/CutterWAxisForm';

import LineCamThresData from './hdForms/LineCamThresData';
import CutterCamThresData from './hdForms/CutterCamThresData';

// import OfflineXAxisForm from './hdForms/OfflineXAxisForm';
// import OfflineZAxisForm from './hdForms/OfflineZAxisForm';
import OfflineWorkingForm from './hdForms/OfflineWorkingForm';

import { Stage, Layer, Text, Image, Line, Label, Tag, Rect } from 'react-konva';

@connect(({ hdst }) => ({ hdst }))
@Form.create()
class HdSettings extends Component {
  constructor(props) {
    super(props);
  }
  state = {};

  render() {
    const Panel = Collapse.Panel;
    const {
      offlineZmcParams,
      camZmcParams,
      cbjZmcParams,
      cutterZmcParams,
      lineCamCheckThres,
      cutterCamCheckThres,
    } = this.props.hdst;

    return (
      <>
        <Collapse onChange={this.callback} style={{ marginLeft: 220 }}>
          <Panel header="离线上料控制器参数" key="0">
            <Card
              title={
                <font style={{ color: '#FF0000', fontSize: 16 }}>离线上料控制器工作参数设置</font>
              }
            >
              <OfflineWorkingForm offlineZmcParams={offlineZmcParams} />
            </Card>
          </Panel>
          <Panel header="上料控制器参数设置" key="1">
            <Card
              title={
                <font style={{ color: '#FF0000', fontSize: 16 }}>
                  上料控制器X轴参数设置(横梁平移轴)
                </font>
              }
            >
              <CamXAxisForm camZmcParams={camZmcParams} />
            </Card>
            <Card
              title={
                <font style={{ color: '#FF0000', fontSize: 16 }}>上料控制器Y轴参数设置(皮带)</font>
              }
            >
              <CamYAxisForm camZmcParams={camZmcParams} />
            </Card>
            <Card
              title={
                <font style={{ color: '#FF0000', fontSize: 16 }}>
                  上料控制器Z轴参数设置(横梁上下轴)
                </font>
              }
            >
              <CamZAxisForm camZmcParams={camZmcParams} />
            </Card>
            <Card
              title={
                <font style={{ color: '#FF0000', fontSize: 16 }}>
                  上料控制器R轴参数设置(横梁旋转轴)
                </font>
              }
            >
              <CamRAxisForm camZmcParams={camZmcParams} />
            </Card>
          </Panel>
          <Panel header="裁切机控制器参数设置" key="2">
            <Card title={<font style={{ color: '#FF0000', fontSize: 16 }}>裁切机X轴参数设置</font>}>
              <CbjXAxisForm cbjZmcParams={cbjZmcParams} />
            </Card>
            <Card title={<font style={{ color: '#FF0000', fontSize: 16 }}>裁切机Y轴参数设置</font>}>
              <CbjYAxisForm cbjZmcParams={cbjZmcParams} />
            </Card>
            <Card
              title={
                <font style={{ color: '#FF0000', fontSize: 16 }}>
                  裁切机Z轴参数设置(刀头上下轴)
                </font>
              }
            >
              <CbjZAxisForm cbjZmcParams={cbjZmcParams} />
            </Card>
            <Card
              title={
                <font style={{ color: '#FF0000', fontSize: 16 }}>
                  裁切机R轴参数设置(刀头旋转轴)
                </font>
              }
            >
              <CbjRAxisForm cbjZmcParams={cbjZmcParams} />
            </Card>
            <Card
              title={<font style={{ color: '#FF0000', fontSize: 16 }}>裁切机切割拖拽参数设置</font>}
            >
              <CbjCutForm cbjZmcParams={cbjZmcParams} />
            </Card>
          </Panel>
          <Panel header="铡刀控制器参数设置" key="3">
            <Card
              title={
                <font style={{ color: '#FF0000', fontSize: 16 }}>铡刀X轴参数设置(前段皮带)</font>
              }
            >
              <CutterXAxisForm cutterZmcParams={cutterZmcParams} />
            </Card>
            <Card
              title={
                <font style={{ color: '#FF0000', fontSize: 16 }}>铡刀Y轴参数设置(后段皮带)</font>
              }
            >
              <CutterYAxisForm cutterZmcParams={cutterZmcParams} />
            </Card>
            <Card
              title={
                <font style={{ color: '#FF0000', fontSize: 16 }}>
                  铡刀Z轴参数设置(机械手上下轴)
                </font>
              }
            >
              <CutterZAxisForm cutterZmcParams={cutterZmcParams} />
            </Card>
            <Card
              title={
                <font style={{ color: '#FF0000', fontSize: 16 }}>
                  铡刀R轴参数设置(机械手旋转轴)
                </font>
              }
            >
              <CutterRAxisForm cutterZmcParams={cutterZmcParams} />
            </Card>
            <Card
              title={
                <font style={{ color: '#FF0000', fontSize: 16 }}>铡刀W轴参数设置(铡刀上下轴)</font>
              }
            >
              <CutterWAxisForm cutterZmcParams={cutterZmcParams} />
            </Card>
          </Panel>
          <Panel header="上料相机识别阈值设置" key="4">
            <Card
              title={
                <font style={{ color: '#FF0000', fontSize: 16 }}>上料线阵相机识别阈值设置</font>
              }
            >
              <LineCamThresData lineCamCheckThres={lineCamCheckThres} />
            </Card>
          </Panel>
          <Panel header="铡刀相机识别阈值设置" key="5">
            <Card
              title={
                <font style={{ color: '#FF0000', fontSize: 16 }}>铡刀面阵相机识别阈值设置</font>
              }
            >
              <CutterCamThresData cutterCamCheckThres={cutterCamCheckThres} />
            </Card>
          </Panel>
        </Collapse>
      </>
    );
  }
}
export default HdSettings;
